<template>
    <div>
        <dialog-alert :data="uploadAlertData" @on-close="onCloseUploadAlert()" @on-confirm="onConfirmUploadAlert()">
            <div class="dialog-alert">
                <table class="d-a_other-info">
                    <tr class="rename">
                        <td class="r-title">轮播图重命名：</td>
                        <td><input type="text" v-model="bannerInfo.name"></td>
                    </tr>
                    <tr>
                        <td class="r-title">轮播图链接：</td>
                        <td><input type="text" v-model="bannerInfo.link"></td>
                    </tr>
                </table>
                <div v-if="type == 'change'">
                    是否修改轮播图图片：
                    <el-switch v-model="isChangeBannerImg"/>
                </div>
                <div v-if="isChangeBannerImg || type !== 'change'">
                    <upload-alert :type="type" @getBannerInfo="getBannerInfo" @clearInput="clearInput" @closeUploadAlert="onCloseUploadAlert" @alertTip="alertTip" ref="uploadAlertRef"></upload-alert>
                </div>
            </div>
        </dialog-alert>
    </div>
    <dialog-alert v-if="isShowAlert == 'success'" :data="sucessData" @on-confirm="onConfirm" @on-close="onCancel"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'failure'" :data="failData" @on-confirm="onConfirm" @on-close="onCancel"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'bannerImageEmpty'" :data="bannerImageEmptyData" @on-confirm="onEmptyConfirm"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'changeSuccess'" :data="changeSuccessData" @on-confirm="onConfirm"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'changeFailure'" :data="changeFailureData" @on-confirm="onConfirm"></dialog-alert>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import { IBannerInfoModel } from '../../manage-banner.model'
import manageBannerStore from '../../manage-banner.store'

const manageBannerSe = manageBannerStore()

const props = defineProps({
    type: {
        type: String,
        default: ''
    }
})

const { type } = toRefs(props)

// 是否修改轮播图图片
let isChangeBannerImg = ref<boolean>(false)

const bannerInfo = reactive({
    name: '',   // 图片重命名的名称
    link: ''    // g该轮播图跳转的链接
}) as IBannerInfoModel

// 更新轮播图信息时给输入框赋值
const assignValueToInput = (name: string, link: string) => {
    bannerInfo.name = name
    bannerInfo.link = link
}
defineExpose({
    assignValueToInput
})

// 添加轮播图弹窗信息
const uploadAlertData = {
    title: type.value == 'change' ? '更新轮播图信息' : '添加轮播图',
    confirmTitle: type.value == 'change' ? '更改' : '添加',
    isShowCancleBtn: true,
    cancleTitle: '取消',
    isShowClose: true,
    size: 'large'
}

// 添加图片时获取图片信息
const getBannerInfo = (file: any) => {
    if(type.value !== 'change') {
        let name = file.name
        bannerInfo.name = name.split('.')[0]
    }
}

const emits = defineEmits(['onCloseEditBannerAlert', 'getBannerList', 'on-confirm', 'closeUploadAlert'])
// 弹窗内点击取消时
let isShowUploadAlert = ref<boolean>(false)
const onCloseUploadAlert = () => {
    isShowUploadAlert.value = false
    bannerInfo.name = ''
    bannerInfo.link = ''
    emits('onCloseEditBannerAlert')
}

// 弹窗内点击确认时
let uploadAlertRef = ref<any>(null)
const onConfirmUploadAlert = () => {
    let data: any = {
        b_name: bannerInfo.name,
        b_link: bannerInfo.link == '' ? '无' : bannerInfo.link,
        type: 'banner'
    }
    if(type.value === 'change') {
        data['bid'] = window.sessionStorage.getItem('currentBannerId')
        if(!isChangeBannerImg.value) {
            manageBannerSe.getUpadtaBannerById(data).then((res: any) => {
                if(res.status == 'success') {
                    isShowAlert.value = 'changeSuccess' 
                    emits('getBannerList')
                } else {
                    isShowAlert.value = 'changeFailure' 
                }
            })
        } else {
            uploadAlertRef.value?.handleDownload(data)
        }
    } else {
        uploadAlertRef.value?.handleDownload(data)
    }
}

// 点击添加或更改按钮的提示弹窗逻辑
let isShowAlert = ref<string>('')
// 上传成功弹窗数据
const sucessData = {
    title: '上传图片成功',
    message: '图片上传成功，是否继续添加?',
    confirmTitle: '是',
    isShowCancleBtn: true,
    cancleTitle: '否',
    isShowClose: false,
}
// 上传失败弹窗数据
const failData = {
    title: '上传图片失败',
    message: '图片上传失败，请重新上传！',
    confirmTitle: '确认',
    isShowClose: false,
}
// 上传图片数据不全
const bannerImageEmptyData = {
    title: '上传图片失败',
    message: '图片不能为空，请选择需要上传的图片（如果修改轮播图信息时不需要更换轮播图，请把“是否修改轮播图图片”选项关闭！）。',
    confirmTitle: '确认',
    isShowClose: false,
}
// 更改信息成功
const changeSuccessData = {
    title: '更改信息成功',
    message: '更改信息成功！',
    confirmTitle: '确认',
    isShowClose: false,
}
// 更改信息失败
const changeFailureData = {
    title: '更改信息失败',
    message: '更改信息失败！',
    confirmTitle: '确认',
    isShowClose: false,
}
// 用户继续上传图片或修改信息时点击弹窗确认按钮
const onConfirm = () => {
    isShowAlert.value = ''
    if(type.value == 'change') {
        emits('onCloseEditBannerAlert')
    }
}
// 更改轮播图信息时选择上传图片但是并为选择上传的图片
const onEmptyConfirm = () => {
    isShowAlert.value = ''
}
// 用户不再上传图片
const onCancel = () => {
    isShowAlert.value = ''
    emits('onCloseEditBannerAlert')
}

// 弹窗显示
const alertTip = (value: string) => {
    isShowAlert.value = value
}

// 清空输入框内容
let bannerListRef = ref<any>(null)
const clearInput = (value: boolean) =>{
    if(value) {
        emits('getBannerList')
    }
    nextTick(() => {
        bannerInfo.name = ''
        bannerInfo.link = ''
    })
}
</script>

<style lang="less" scoped>
.d-a_other-info {
    min-width: 20rem;
    tr {
        height: 3rem;
        vertical-align: top;
        .r-title {
            padding-top: 0.4rem;
        }
        td {
            text-align-last: justify;
            input {
                width: 100%;
                height: 2rem;
                line-height: 2rem;
                padding: 0 0.5rem;
                padding-right: 1.5rem;
                border-radius: 0.3rem;
                border: 1px solid var(--pc-border-gray);
                text-align-last: left;
            }
        }
    }
}
</style>